/**
 * 数据权限组
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row>
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label zh="关键字" en="Keyword"/></template>
							<el-input v-model="searchForm.keyword" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'qualitySafetyDataGroup.edit'" @click="handleAdd"/>
		</template>
		<template #table>
			<vp-vxe-table
				id="qualitySafetyDataGroupTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column
					field="mc" 
					title="名称 Name"
					sortable
					show-overflow
					min-width="100"
				>
					<template #header><vp-label zh="名称" en="Name"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.mc)"/>
					</template>
				</vxe-column>
				<vxe-column
					field="sm" 
					title="说明 Desc."
					sortable
					show-overflow
					min-width="100"
				>
					<template #header><vp-label zh="说明" en="Desc."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.sm)"/>
					</template>
				</vxe-column>
				<vxe-column 
					field="sygn" 
					title="适用功能 Applicable Functions"
					show-overflow
					min-width="180"
				>
					<template #header><vp-label zh="适用功能" en="Applicable Functions"/></template>
					<template #default="scope">
						<el-space wrap :size="3" alignment="flex-start">
							<span v-for="item in scope.row.functions" :key="item.id">
								<span v-if="item.sygn === 11">部门自愿报告 Dept. Voluntary Report</span>
								<span v-if="item.sygn === 12">公司自愿报告 Company Voluntary Report</span>
								<span v-if="item.sygn === 21">部门举报信息 Dept. Report Info.</span>
								<span v-if="item.sygn === 22">公司举报信息 Company Report Info.</span>
								<span v-if="item.sygn === 31">部门整改反馈 Dept. Rectification</span>
								<span v-if="item.sygn === 32">公司整改反馈 Company Rectification</span>
								<span v-if="item.sygn === 41">部门安全隐患 Dept. Safety Hazard</span>
								<span v-if="item.sygn === 42">公司安全隐患 Company Safety Hazard</span>
								<span v-if="item.sygn === 51">部门安全风险管控 Dept. Security Risk Control</span>
								<span v-if="item.sygn === 52">公司安全风险管控 Company Security Risk Control</span>
							</span>
						</el-space>
					</template>
				</vxe-column>
				<vxe-column 
					field="dprt" 
					title="部门 Department"
					show-overflow
					min-width="100"
				>
					<template #header><vp-label zh="部门" en="Department"/></template>
					<template #default="scope">
						<el-space wrap :size="3" alignment="flex-start">
							<span v-for="item in scope.row.dprts" :key="item.id">{{ item.dprtname }}</span>
						</el-space>
					</template>
				</vxe-column>
				<vxe-column 
					field="user" 
					title="用户 User"
					show-overflow
					min-width="100"
				>
					<template #header><vp-label zh="用户" en="User"/></template>
					<template #default="scope">
						<el-space wrap :size="3" alignment="flex-start">
							<span v-for="item in scope.row.users" :key="item.id">{{ item.name }}</span>
						</el-space>
					</template>
				</vxe-column>
				<vxe-column 
					field="operation" 
				 	title="操作 Operations"
					fixed="right" 
					width="180"
				>
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<vp-btn type="primary" text v-auth="'qualitySafetyDataGroup.edit'" @click="handleEditDprt(scope.row)">
							<vp-label zh="部门" en="Department"/>
						</vp-btn>
						<vp-btn type="primary" text v-auth="'qualitySafetyDataGroup.edit'" @click="handleUser(scope.row)">
							<vp-label zh="用户" en="User"/>
						</vp-btn>
						<vp-btn-edit text v-auth="'qualitySafetyDataGroup.edit'" @click="handleEdit(scope.row)"/>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<EditDataGroup ref="editDialogRef" @formSubmited="handleFormSubmited"></EditDataGroup>
		<EditDataGroupUser ref="editDataGroupUserRef" @formSubmited="handleFormSubmited"></EditDataGroupUser>
		<EditDataGroupDprt ref="editDataGroupGroupRef" @formSubmited="handleFormSubmited"></EditDataGroupDprt>
		<UserDialog ref="userDialogRef"></UserDialog>
	</vp-main-page>
</template>
<script setup lang="ts" name="qualitySafetyDataGroup">
import { ref, reactive, onMounted } from 'vue';
import request from '/@/utils/request';
import EditDataGroup from './component/EditDataGroup.vue';
import EditDataGroupUser from './component/EditDataGroupUser.vue';
import EditDataGroupDprt from './component/EditDataGroupDprt.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import { markTextColor } from '/@/utils/toolsValidate';
import { useI18n } from 'vue-i18n';
import { DEFAULT_PAGE } from '/@/utils/page';

const searchForm = reactive({
	keyword: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const loading = ref(false);
const tableData = ref([]);

const i18n = useI18n();

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/system/dataGroup/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data || [];
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadDataList()
})

const editDialogRef = ref();
const userDialogRef = ref();
const handleFormSubmited = ()=>{
	loadDataList();
}

const handleAdd = ()=>{
	editDialogRef.value.handleOpen(1, 'add');
}
const handleEdit = (row: any)=>{
	editDialogRef.value.handleOpen(1, 'edit', row.id);
}

const editDataGroupGroupRef = ref();
const handleEditDprt = (row: any)=>{
	editDataGroupGroupRef.value.handleOpen(row.id);
}

const editDataGroupUserRef = ref();
const handleUser = (row: any)=>{
	request.get(`/system/dataGroup/user/${row.id}`).then((res)=>{
		userDialogRef.value.handleOpen({
			type: 1,
			multi: true,
			selected: (res?.data||[]).filter((obj: any) => {return obj.flag === 1;}).map((obj: any) => {return obj.id;}),
			callback: (list: any) => {
				loading.value = true;
				const userIds = list.map((obj: any) => {return obj.yhid;});
				request.post(`/system/dataGroup/user/${row.id}`, userIds).then(()=>{
					loadDataList();
				}).catch(()=>{
				}).finally(()=>{
					loading.value = false;
				})
			}
		});
	})
}

const tableRef = ref()
</script>
<style scoped>
:deep(.el-tree__empty-block){
	position: relative;
    min-height: 0px;
    text-align: center;
    width: 100%;
    height: 100%;
}
</style>